<template>
	<view id="Withdrawal">
		<view class="head">
			<view class="WDamount">
				<span>可提现金额（元）</span>
				<h3>{{dataObj.money}}</h3>
				<span>金币总额 {{dataObj.score}}</span>
			</view>
			<view class="btn">
				<button @click="withdrawal">立即提现</button>
			</view>
			<view class="WDnum">
				<view class="WDleft">
					<h4>当前提现次数：{{dataObj.cashNum}}</h4>
					<span>绑定好友邀请码可获得提现次数</span>
				</view>
				<view class="WDright" @click="LausirCode = true">
					<span>增加提现次数</span>
					<span class="rightArrow"></span>
				</view>
			</view>
		</view>
		<view class="rules">
			<span>1、现金满5元才能申请提现</span>
			<span>2、现金提现提交后请联系客服，否则无法到账。</span>
			<span>3、请依照客服指示正确操作。</span>
			<span>4、现金会在48小时内发放到您微信零钱账户。</span>
			<span>5、每天仅能提现一次，多余提现申请将不会发放。</span>
			<button open-type="contact">联系客服</button>
		</view>
		<view class="jump">
			<image src="../../static/img/rawgold.png" mode=""></image>
		</view>
		<view class="modalBox" v-show="modalShow">
			<!-- 提示 -->
			<view class="toastBox" :class="{'toastBoxHeight':titImg}">
				<image src="../../static/img/success.png" alt="" v-if="titImg"></image>
				<div :class="{'prompt':!titImg}">
					<view class="tit">{{title}}</view>
					<p v-html="content"></p>
				</div>
				<div class="btn">
					<button class="commit" @click="determine" open-type="share">分享赚金币</button>
					<button class="cancel" @click="cancel">返回</button>
				</div>
			</view>
			<!-- 提现 -->
			<view class="withdrawalToastBox" v-show="modalShow">
				<div>
					<view class="tit">
						提现金额：<span>(余额：{{dataObj.money}})</span>
					</view>
					<input type="number" v-model="inputNum" placeholder="请输入金额" />
				</div>
				<button class="commit" @click="ImmediateWithdrawal">提现</button>
				<image class="close" src="../../static/img/close.png" mode="" @click="cancel"></image>
			</view>
		</view>
		<LausirCodedialog len=8 :show="LausirCode" v-on:Commit="determine"></LausirCodedialog>
	</view>
</template>

<script>
	// import Modal from "../../components/Modal.vue"
	import LausirCodedialog from "../../components/lausir-codedialog.vue"
	export default {
		data() {
			return {
				modalShow: false,
				LausirCode: false,
				title: "提现申请已提交",
				titImg: true,
				cancelShow: true,
				commitShow: true,
				content: "现金会在48小时内发放到您微信零钱账户若未及时到账请联系客服人员",
				myStyle: {
					height: '367upx'
				},
				dataObj: null, //接受myinfo传参
				inputNum: null //提现金额
			}
		},
		components: {
			// Modal,
			LausirCodedialog
		},
		onLoad(options) {
			this.dataObj = JSON.parse(options.dataObj)
		},
		methods: {
			withdrawal() {
				this.modalShow = true;
				if (0) {
					this.title = "提现申请已提交";
				} else {
					this.title = "提示";
					this.content = "今日提现次数已用完";
					this.titImg = false;
				}
			},
			ImmediateWithdrawal() {
				let _this = this;
				if (this.inputNum >= 5) {
					let str = this.inputNum.split(".")
					if (!str[1] || str[1].length <= 2) {
						this.$get(configUrl.Withdrawal, {
							cash: _this.inputNum,
							token: uni.getStorageSync("token")
						}).then((res) => {
							if (res.data.msg == "SUCCESS") {
								_this.dataObj.score = res.data.data.gold
								_this.dataObj.money = res.data.data.cash
								_this.dataObj.cashNum = res.data.data.cashNum
								uni.showToast({
									title: "提现成功！"
								})
								return
							}

							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						})
					} else {
						uni.showToast({
							title: "小数点后只允许两位小数！",
							icon: "none"
						})
					}
				} else {
					uni.showToast({
						title: "提现金额因大于5元！",
						icon: "none"
					})
				}

			},
			cancel() {
				this.modalShow = false;
			},
			determine() {
				this.LausirCode = false;
			}
		}
	}
</script>

<style lang="scss" scope>
	button::after {
		border: none;
	}

	input {
		outline: none;
		border: none;
		list-style: none;
	}

	#Withdrawal {
		.head {
			position: relative;
			width: 100%;
			height: 295upx;
			background: url("") no-repeat;
			background-size: 100% auto;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.WDamount {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				span {
					font-family: PingFangSC-Regular;
					font-size: 24upx;
					color: #FFFFFF;
					letter-spacing: 0.4upx;
					text-align: center;
				}

				h3 {
					font-family: DINAlternate-Bold;
					font-size: 70upx;
					color: #FFFFFF;
					letter-spacing: 5.6upx;
					text-align: center;
				}
			}

			.btn {
				button {
					width: 268upx;
					height: 73upx;
					font-family: PingFangSC-Regular;
					border: 1upx solid #FFFFFF;
					border-radius: 36.5upx;
					color: #FFFFFF;
					font-size: 32upx;
					letter-spacing: 0;
					text-align: center;
					background: none;
				}
			}

			.WDnum {
				position: absolute;
				bottom: -38upx;
				left: 0;
				right: 0;
				width: 600upx;
				height: 86upx;
				background: #FFFFFF;
				box-shadow: 0 9upx 14upx 0 rgba(0, 0, 0, 0.10);
				border-radius: 43upx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: row;
				margin: 0 auto;

				.WDleft {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;

					h4 {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: #333333;
						letter-spacing: 0.3upx;
						text-align: left;
					}

					span {
						font-family: PingFangSC-Regular;
						font-size: 20upx;
						color: rgba(51, 51, 51, 0.44);
						letter-spacing: 0.25upx;
						text-align: left;
					}
				}

				.WDright {
					display: flex;
					justify-content: space-around;
					align-items: center;

					span {
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: #BC3030;
						letter-spacing: 0.3upx;
						text-align: center;
					}

					.rightArrow {
						display: block;
						width: 14upx;
						height: 14upx;
						border-top: 2upx solid #BC3030;
						border-right: 2upx solid #BC3030;
						transform: rotate(45deg);
						margin-left: 8upx;
					}
				}
			}
		}

		.rules {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			margin: 57upx auto 0;
			width: 100%;
			height: 472upx;
			background: #FFFFFF;
			box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.50);
			padding-top: 22upx;

			span {
				font-family: PingFangSC-Regular;
				font-size: 24upx;
				color: #764F35;
				letter-spacing: 0.3upx;
				text-align: left;
				padding: 0 60upx 0;
			}

			button {
				width: 670upx;
				height: 94upx;
				background: #333333;
				border: 2upx solid rgba(5, 5, 5, 0.08);
				border-radius: 10upx;
				font-family: PingFangSC-Regular;
				font-size: 36upx;
				color: #FFFFFF;
				text-align: center;
				margin-top: 56upx;
				margin-bottom: 50upx;
			}

		}

		.jump {
			width: 670upx;
			height: 275upx;
			margin: 50upx auto 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.modalBox {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.6);

			.toastBox {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 550upx;
				height: 291upx;
				// max-height: 467upx;
				background: #FFFFFF;
				border-radius: 12upx;
				z-index: 9999999;
				overflow: hidden;

				image {
					width: 97upx;
					height: 112upx;
					margin: 53upx 223upx 16upx 222upx;
				}

				.prompt {
					margin-top: 50upx;

					.tit {
						margin-bottom: 20upx;
					}
				}

				div {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.tit {
						font-family: PingFangSC-Semibold;
						font-size: 36upx;
						color: #000000;
						letter-spacing: 0.54upx;
						text-align: center;
					}

					p {
						padding: 0 54upx;
						font-family: PingFangSC-Regular;
						font-size: 24upx;
						color: #999999;
						letter-spacing: 0.3upx;
						text-align: center;
						line-height: 33upx;

					}
				}

				.btn {
					position: absolute;
					bottom: 0;
					left: 0;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 0;

					.commit1 {
						width: 332upx;
						height: 85upx;
						background: #BA2B2B;
						border-radius: 42.5upx;
						color: #FFFFFF;
					}

					.commit,
					.cancel {
						font-family: PingFangSC-Regular;
						font-size: 36upx;
						color: #000000;
						text-align: center;
						width: 275upx;
						height: 90upx;
						margin-top: 42upx;
						border-top: 1upx solid #e5e5e5;
						border-radius: 0;
						background: #FFFFFF;
					}

					.commit {
						border-bottom-left-radius: 12px;
					}

					.cancel {
						border-left: 1px solid #E5E5E5;
						border-bottom-right-radius: 12px;
						color: #02BB00;
					}
				}


				.close {
					position: absolute;
					bottom: -224upx;
					left: 229upx;
					border: none;
					padding: 0;
					width: 92upx;
					height: 92upx;
					background: none;
					display: block;
				}
			}

			.toastBoxHeight {
				height: 467upx;
			}

			.withdrawalToastBox {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 550upx;
				height: 467upx;
				// max-height: 467upx;
				background: #FFFFFF;
				border-radius: 12upx;
				z-index: 9999999;
				// overflow: hidden;

				div {
					.tit {
						padding-top: 60upx;
						padding-left: 52upx;
						font-family: PingFangSC-Regular;
						font-size: 36upx;
						color: #333333;
						letter-spacing: 0;
						text-align: center;

						span {
							font-family: PingFangSC-Light;
							font-size: 28upx;
							color: #666666;
							letter-spacing: 0;
							text-align: center;
							padding-left: 10upx;
						}
					}

					input {
						width: 415upx;
						height: 91upx;
						border-bottom: 1upx solid #505050;
						margin: 60upx auto;
						font-family: PingFangSC-Light;
						font-size: 48upx;
						color: #CCCCCC;
						letter-spacing: 0;
						text-align: left;
						padding-left: 70upx;
						background: url("") no-repeat center left;
						background-size: auto 80%;
					}

					input:placeholder {
						font-family: PingFangSC-Light;
						font-size: 48upx;
						color: #CCCCCC;
						letter-spacing: 0;
						text-align: center;
					}
				}

				.commit {
					width: 332upx;
					height: 85upx;
					background: #BA2B2B;
					border-radius: 42.5upx;
					color: #FFFFFF;
				}

				.close {
					position: absolute;
					bottom: -224upx;
					left: 229upx;
					border: none;
					padding: 0;
					width: 92upx;
					height: 92upx;
					background: none;
					display: block;
				}
			}
		}
	}
</style>
